<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.min.js"></script>
</head>
<body>

<div id="a" style="...">
    <el-pagination
            background page-size="100" current-page="1"
            layout="first,prev,pager,next,last"
            :total="1000"
            :page-sizes="[20,50,100,200]">
    </el-pagination>
</div>


<script>
    Vue.component("el-pagination",{
        props:["background","page-size","current-page","layout","total","page-sizes"],
        template:`
        <div>
            <select v-if="pageSizes != undefined"
            v-model=" selectSize " @change="pageSize = selectSize">
            <option v-for=" size in pageSizes" :value="size" >每页{{size}}行</option>

            </select>
            <template v-for=" l in layouts">
                <span v-if=" l=='first' " class="pager" style="background-color: #eee">第一页</span>

                <span v-if=" l=='prev' " :style="getStyle(0)"  @click="curPage+=(curPage==1?0:-1)"
                class="pager">上一页</span>

                <span v-if=" l=='pager' " class="pager" v-for=" p in pages"
                :style="getStyle(p)" @click="curPage=p"> {{p}}</span>

                <span v-if=" l=='next' " :style="getStyle(0)"  @click="curPage += (curPage==pages?0:1)"
                class="pager" style="background-color: #eee">下一页</span>


                <span v-if=" l=='last' " class="pager" style="background-color: #eee">最后一页</span>
            </template>
        </div>
        `,
        data(){
            return{
                curPage : 1,
                layouts:[],
                selectSize:0
            }
        },
        created(){
          this.curPage=parseInt(this.currentPage);
          //字符串转数组，用正则表达式分割
          this.layouts=this.layout.split(/\W+/);
          this.selectSize=this.pageSize;
        },
        computed:{
            pages(){
                let all = this.total / this.pageSize;
                all=Math.floor(all);//取整
                if (this.total % this.pageSize!=0){
                    all++;
                }
                return all;
            }
        },

        methods:{
            getStyle(p){
                let ret ={backgroundColor : null };
                if (this.background!=undefined){
                    ret.backgroundColor ='#eee';
                }
                if ( p == this.curPage ){
                    ret.backgroundColor='#aaa';
                }
                return ret;
            }
        }
    });

    var v = new Vue({
        el:"#a",
    });
</script>
<style>
    .pager{
        display: inline-block;
        text-align: center;
        min-width: 20px;
        padding: 5px;
        margin: 5px;
        border-radius: 3px;
    }
</style>
</body>
</html>